<template>
  <div class="app-container" style="background:rgb(240, 242, 245);width:100%;">
    <div class="filter-container" style="background:white;width:100%;">
      <!--<el-input @keyup.enter.native="handleFilter" style="width: 180px;" class="filter-item" placeholder="设备类别、使用单位">-->
      <!--</el-input>-->
      <!--<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>-->
      <!--<router-link class="filter-item" :to="'/auth/user/create'">-->
      <!--<el-button type="primary" icon="el-icon-edit">添加</el-button>-->
      <!--</router-link>-->
      <el-row>
        <div align="center">工艺流程</div>
        <el-row :gutter="32" style="width:100%;height:80px;padding:10px 30px 0;margin-bottom:3px;">
          <el-steps :active="number" finish-status="success" simple style="margin-top: 20px">
            <el-step title="蒸汽预热"></el-step>
            <el-step title="油气预热"></el-step>
            <el-step title="进油生焦"></el-step>
            <el-step title="小吹气"></el-step>
            <el-step title="大吹气"></el-step>
            <el-step title="进水冷焦"></el-step>
            <el-step title="放水"></el-step>
            <el-step title="除焦"></el-step>
          </el-steps>
        </el-row>
        <el-row :gutter="32" style="width:100%;height:100px;padding:30px 200px 0;margin-bottom:3px;">
          <el-steps :active="number" finish-status="success">
            <el-step title="2.00 h"></el-step>
            <el-step title="6.00 h"></el-step>
            <el-step title="24.00h"></el-step>
            <el-step title="1.00h"></el-step>
            <el-step title="4.00h"></el-step>
            <el-step title="4.00h"></el-step>
            <el-step title="1.50h"></el-step>
            <el-step title="2.50h"></el-step>
          </el-steps>
        </el-row>
      </el-row>

      <el-row style="width:100%;height:800px;padding:50px 30px 0;margin-bottom:10px;">
        <el-col :span="7">
          <graph_click ref="graph_click"
                       @showAll="allSensorShow"> //监听子组件请求
          </graph_click>
          <!--<img :src="imgUrl">-->

        </el-col>
        <el-col :span="17">
          <el-row :gutter="32" style="height: 400px">
            <el-col :xs="24" :sm="24" :lg="8" style="width:50%">
              <div>
                <temperature v-show="temperature_visible"></temperature>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" style="width:50%">
              <div>
                <strain v-show="strain_visible"></strain>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="32" style="height: 400px;">
            <el-col :xs="24" :sm="24" :lg="8" style="width:50%">
              <div>
                <slope v-show="slope_visible"></slope>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" style="width:50%">
              <div>
                <vibration v-show="vibration_visible"></vibration>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" plain size="mini" @click="AcousticSensor">声发射传感器</el-button>
          <el-button type="primary" plain size="mini" @click="VibrationSensor">振动传感器</el-button>
          <el-button type="warning" plain size="mini" @click="TemperatureSensor">温度传感器</el-button>
          <el-button type="success" plain size="mini" @click="StrainSensor">应力传感器</el-button>
          <el-button type="danger" plain size="mini" @click="SlopeSensor">倾斜传感器</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="32" style="width:100%;height:400px;padding:10px 30px 0;margin-bottom:3px;">
        <el-col :xs="24" :sm="24" :lg="8" style="width:100%">
          <div>
            <acoustic_emission v-show="acoustic_visible"></acoustic_emission>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'

  import { req } from '@/api/base/BaseApi'
  import temperature from './temperature'
  import strain from './strain'
  import slope from './slope'
  import vibration from './vibration'
  import acoustic_emission from './acoustic_emission'
  import tower_graph from './graph'
  import Graph_click from './graph_click'

  let userTypes = []
  export default {
    components: {
      Graph_click,
      temperature,
      strain,
      slope,
      vibration,
      acoustic_emission,
      tower_graph
    },
    data() {
      return {
        number: 0,
        imgUrl: require('@/assets/CokeTower.jpg'),
        temperature_visible: true,
        slope_visible: true,
        strain_visible: true,
        acoustic_visible: true,
        vibration_visible: true
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    created() {

    },
    mounted() {
      this.$nextTick(() => {
        setInterval(() => {
          // req('/api/sys/auth/monitor/checkStatus', 'POST', '').then(response => {
          //   this.number = response.data
          // }).catch(() => console.log('page request error'))
          const max = 8;
          const min = 1;
          this.number = parseInt(Math.random()*(max-min+1)+min,10);
        }, 9000)
      })
    },
    methods: {
      page() {
        this.listLoading = true
        // console.log(this.listQuery)
        // req('/api/sys/auth/riskinfo/pages', 'put', this.listQuery).then(response => {
        //   this.list = response.data
        //   this.total = response.total
        //   this.listLoading = false
        // }).catch(() => console.log('page request error'))
      },
      get(id) {
        this.listLoading = true
        get(this.module, id).then(res => {
          this.info = res.data
          this.listLoading = false
        })
      },
      getUserType() {
        userType(this.module + '/userType').then(response => {
          if (response.data) {
            userTypes = response.data
          }
        })
      },
      handleDelete(id) {
        this.listLoading = true
        del(this.module, id).then(res => {
          this.page()
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleDeletes() {
        this.listLoading = true
        dels(this.module, this.ids).then(res => {
          console.log(res)
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listLoading = true
        if (this.listQuery.keyword === undefined) {
          this.listQuery.keyword = ''
        }
        req('/api/sys/auth/riskinfo/sortCategoryInfo', 'put', this.listQuery.keyword).then(response => {
          this.list = response.data
          this.total = response.total
          this.listLoading = false
        }).catch(() => console.log('page request error'))
        //  this.listQuery.page = 1
        // this.page()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.page()
      },
      handleCurrentChange(val) {
        console.log('handleCurrentChange')
        this.listQuery.page = val
        this.page()
      },
      AcousticSensor: function() {
        this.$refs['graph_click'].selectedSensor(1)
        // 可见与不可见
        this.temperature_visible = false
        this.slope_visible = false
        this.strain_visible = false
        this.acoustic_visible = true
        this.vibration_visible = false
      },
      VibrationSensor: function() {
        this.$refs['graph_click'].selectedSensor(5)
        // 可见与不可见
        this.temperature_visible = false
        this.slope_visible = false
        this.strain_visible = false
        this.acoustic_visible = false
        this.vibration_visible = true
      },
      TemperatureSensor: function() {
        this.$refs['graph_click'].selectedSensor(3)
        // 可见与不可见
        this.temperature_visible = true
        this.slope_visible = false
        this.strain_visible = false
        this.acoustic_visible = false
        this.vibration_visible = false
      },
      StrainSensor: function() {
        this.$refs['graph_click'].selectedSensor(4)
        // 可见与不可见
        this.temperature_visible = false
        this.slope_visible = false
        this.strain_visible = true
        this.acoustic_visible = false
        this.vibration_visible = false
      },
      SlopeSensor: function() {
        this.$refs['graph_click'].selectedSensor(2)
        // 可见与不可见
        this.temperature_visible = false
        this.slope_visible = true
        this.strain_visible = false
        this.acoustic_visible = false
        this.vibration_visible = false
      },
      allSensorShow: function() {
        // 可见与不可见
        this.temperature_visible = true
        this.slope_visible = true
        this.strain_visible = true
        this.acoustic_visible = true
        this.vibration_visible = true
      }
    }
  }
</script>
<style scoped>
  .demo-table-expand {
    font-size: 20px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100px;
  }
</style>

